<template name="BarList">
	<view class="box" :class="avtleft?'leftshow':'rightshow'" >
		<view v-if="avtleft" class="cu-avatar xl round margin-left avtleft" style="background-color: white;">
			<image :src="avt" style='width:30px;height:30px;'></image>
		</view>
		<view class="maintext" :class="avtleft?'alignleft':'alignright'">
			<text class="title" >{{title}}</text>
			<text class="dec">{{dec}}</text>
		</view>
		<view v-if="!avtleft" class="cu-avatar xl round margin-left avtright" style="background-color: white;">
			<image :src="avt" style='width:30px;height:30px;'></image>
		</view>
	</view>
</template>

<script>
	export default {
		name:"BarList",
		data() {
			return {
			};
		},
		props:{
			avt:{
				type:String,
				required:true
			},
			title:{
				type:String,
				required:true
			},
			dec:{
				type:String,
				required:true
			},
			avtleft:{
				type:Boolean,
				required:true
			}
		},
	
	}
</script>

<style lang="scss" scoped>
	.leftshow{
		animation: barlistshowleft ease-in 0.5s;
	}
	.rightshow{
		animation: barlistshowright ease-in 0.5s;
	}
	.alignleft{
		text-align: left;
	}
	.alignright{
		text-align: right;
	}
	.box{
		
		display: flex;
		flex-direction: row;
		justify-content: center;
		margin: 5vh 5vw;
		.avtleft{
			margin-left: 10vw;
			background-color: #FFFFFF;
		}
		.avtright{
			margin-right: 10vw;
		}
		.maintext{
			width: 60vw;
			background-color: #FFFFFF;
			display: flex;
			flex-direction: column;
			margin: 0 3vw;
			padding: 1vh 3vw;
			border-radius: 5%;
			justify-content: center;
			.title{
				font-size: 18px;
				color: #1296db;
			}
			.dec{
				font-size: 14px;
				color: #c7c7c7;
			}
		}
	}

</style>
